<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LV详情表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        .zong-Ye {
            width: 1263px;
        }

        .container {
            width: 1263px;
        }

        .container-box {
            width: 373px;
            height: 424px;
            border-radius: 4px;
            overflow: hidden;
            float: left;
            margin-right: 20px;
            background: #fff;
            margin-top: 30px;
            margin-left: 25px;
            position: relative;

        }

        /* .box:nth-of-type(5n) {
                  margin-right: 0;
            } */
        .container-box img {
            width: 373px;
            height: 373px;
            background-color: #eae8e4;

        }

        .container-box h5 {
            margin-top: 8px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .container-box p {
            margin-top: 3px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .head-Search {
            width: 100%;
            height: 72px;
            border-bottom: 1px solid #eae8e4;
        }

        /* <!-- 商品log --> */
        .head-Search-log {
            text-align: center;
            line-height: 72px;
            float: left;
            margin: 0 30px;
        }

        /* <!-- 商品样式 --> */
        .head-Search-conten {
            float: left;
        }

        /* .head-Search-conten ul{
            
        } */
        .head-Search-conten ul li {
            line-height: 63px;
            text-align: center;
            float: left;
            margin-right: 30px;
        }

        .head-Search-conten ul li:hover {
            border-bottom: rgb(25, 17, 11) 1px solid;
        }

        .head-Search-conten ul li.active {
            border-bottom: 3px rgb(25, 17, 11) solid;
        }

        /* 吸顶菜单 */
        #Ceiling-suction {
            width: 100%;
            height: 80px;
            border-bottom: 1px solid #eae8e4;
            z-index: 999;
            background-color: whitesmoke;

        }

        #Ceiling-suction ul {
            display: flex;

        }

        #Ceiling-suction ul li {
            float: left;
            height: 80px;
            text-align: center;
            line-height: 80px;
        }

        /* 浏览器跟随图标 */
        .unselectable {
            width: 350px;
            height: 40px;
            background-color: rgb(25, 17, 11);
            position: fixed;
            bottom: 0;
            right: 40px;
            z-index: 999;

        }

        .chat-title {
            color: #fff;
            font-size: 16px;
            line-height: 40px;
            padding-left: 20px;
        }

        #dialog {
            position: absolute;
            top: 0;
            right: 30px;
            border: 15px solid;
            border-color: transparent transparent #cccac9;
        }

        .lv-top {
            width: 100px;
            height: 25px;
            position: fixed;
            bottom: 40px;
            right: 100px;
            z-index: 999;
            border: 1px solid #cccac9;
            text-align: center;
            background-color: azure;
            display: none;
        }

        /* 每个盒子的轮播图 */
        .Carousel-map {
            width: 373px;
            height: 373px;
            overflow: hidden;
        }

        .Carousel-map1 {
            height: 373px;
            width: 746px;
            position: relative;
        }

        .next-button,
        .prev-button {
            position: absolute;
            top: 50%;
            margin-top: -40px;
            height: 40px;
            width: 30px;
            left: 0;
            background-color: #fff;
            opacity: .6;
            border-radius: 0 10px 10px 0;
            z-index: 999;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            line-height: 40px;
        }

        .next-button {
            left: 352px;
            border-radius: 10px 0 0 10px;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="zong-Ye">
        <!-- 跟随图标 -->
        <div class="lv-top" id="top">回到顶部</div>
        <div id="chat-top" class="unselectable">
            <div id="dialog"></div>
            <div class="chat-title">路易威登中国顾客服务中心</div>
        </div>
        <div class="head-Search">
            <!-- 商品log -->
            <div class="head-Search-log">
                <a href="..//dist/LV.html"><img src="./images/1622966034(1).jpg" alt=""></a>
            </div>
            <!-- 商品样式 -->
            <div class="head-Search-conten">
                <ul>
                    <li>新品系列</li>
                    <li>女士</li>
                    <li>男士</li>
                    <li>生活艺术</li>
                </ul>
            </div>
        </div>
        <!-- 吸顶菜单 -->
        <div id="Ceiling-suction">
            <ul style="margin-left: 600px;">
                <li style="width: 197px;">显示筛选器</li>
                <li style="width:125px;border-left: 1px solid #eae8e4;border-right:1px solid #eae8e4 ;">目录</li>
                <li style="width: 197px;border-right:1px solid #eae8e4 ;">按表面材质查看</li>
                <li style="width: 170px;">按颜色查看</li>
            </ul>
        </div>
    </div>
    <div class="container"></div>

</body>
<script>
    var Ceiling_suction = document.querySelector('#Ceiling-suction')
    var Stop = document.querySelector('#top')
    window.onscroll = function () {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (scrollTop >= 72) {
            Ceiling_suction.style.position = 'fixed'
            Ceiling_suction.style.top = '0'
        } else {
            Ceiling_suction.style.position = 'static'
        }
        if (scrollTop > 0) {
            Stop.style.display = "block"
        } else {
            Stop.style.display = "none"
        }

        Stop.onclick = function () {
            document.body.scrollTop = document.documentElement.scrollTop = 0;

        }

    }


</script>
<script src="./static/javascripts/jQuery.js"></script>
<script src="../dist/Lvshuju.json"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<script>
    $(function () {
        $('.img').lazyload();
        $.ajax({
            url: "../dist/Lvshuju.json",
            success: function (data) {

                fnn(data)

            },
            error: function (err) {

            }
        });

        function fnn(data) {

            var container = document.querySelector(".container");
            container.innerHTML = data.map(item => `
                        <div class="container-box">
                            <div class="Carousel-map">
                                <div class="Carousel-map1">
                                <a href="index.html">
                                    <img src="${item.img}" >
                                    <img src="${item.img1}" >
                                </a>
                            </div>
                                <div  class="next-button"><a href="javascript:;">》</a></div>
                                <div class="prev-button"><a href="javascript:;">《</a></div>
                            </div>
                            <h5 >
                                ${item.p1}   
                            </h5>
                            <p > ${item.p2}</p>
                        </div>
                  `
            ).join("");

        }
        var index = 0
        $(".container").on("mouseover", ".Carousel-map", function () {

            var $bottom = $(this).children("div")
            $bottom[1].onclick = function () {
                if (index == 1) {
                    index = 0;
                    $bottom[0].style.top = -377 * index + "px"


                } else {
                    index++;
                    $bottom[0].style.top = -377 * index + "px"

                    console.log(index);
                }

            }
            var $bottom = $(this).children("div")
            $bottom[2].onclick = function () {
                if (index == 0) {
                    index = 1;
                    $bottom[0].style.top = -377 * index + "px"


                } else {
                    index--;
                    $bottom[0].style.top = -377 * index + "px"
                }
                console.log(index);
            }

        })
       
    })

</script>

</html>